<!-- sectionTitle: Components -->

## Components

Fusuma provides some components wrapping webSlides.

<!-- ---

import { Block } from '@fusuma/client';

<Block>

1/9 left top
Put content wherever you want. Have less. Do more. Create beautiful solutions.

.slide-top and .content-left

</Block> -->

---

import { Flex } from '@fusuma/client';

## FlexBlock

_Flexible blocks with auto-fill and equal height._

<Flex
  items={[
    <div>Item 1 Multipurpose: services, features, specs...</div>,
    <div>Item 2 Multipurpose: services, features, specs...</div>,
    <div>Item 3 Multipurpose: services, features, specs...</div>,
    <div>Item 4 Multipurpose: services, features, specs...</div>
  ]}
/>

```js
import { Flex } from '@fusuma/client';

<Flex
  items={[
    <div>Item 1 Multipurpose: services, features, specs...</div>,
    <div>Item 2 Multipurpose: services, features, specs...</div>,
    <div>Item 3 Multipurpose: services, features, specs...</div>,
    <div>Item 4 Multipurpose: services, features, specs...</div>
  ]}
/>;
```

---

<!-- classes: fullscreen -->

import { Card, Code } from '@fusuma/client';

<Card
  left={<img src="https://source.unsplash.com/8lODM_TYmkI/800x600" />}
  right={
    <>
      <h2>Card</h2>
      <br />
      <Code language="js">
        {`<!-- classes: fullscreen -->\n
import { Card, Code } from '@fusuma/client';\n
<Card
  left={<img src="https://source.unsplash.com/8lODM_TYmkI/800x600" />}
  right={
    <Code>...</Code>
  }
/>`}
      </Code>
    </>
  }
/>

---

import { Img } from '@fusuma/client';

<Flex
  items={[
    <Img src="https://source.unsplash.com/8lODM_TYmkI/800x600">
      <h3>Yosemite National Park</h3>
      <p>😆</p>
    </Img>,
    <Code language="js">
      {`import { Img } from '@fusuma/client';\n
<Img src="https://source.unsplash.com/8lODM_TYmkI/800x600">
  <h3>Yosemite National Park</h3>
  <p>😆</p>
</Img>`}
    </Code>
  ]}
/>
